<template>
  <div class="table2">
    <!-- <a-form label-align="right" auto-label-width layout="inline" :model="listParams" size="small" class="form my-10">
      <a-form-item field="title" hide-label>
        <a-input v-model="listParams.title" placeholder="输入关键字检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form> -->
    <GiTable
      row-key="id"
      id="loginLog"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
    </GiTable>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { loginLog } from '@/apis'
import { deleteEmpty } from '@/utils/common'

defineOptions({ name: 'loginLog' })

const columns = ref([
  {
    title: '登录账号',
    width: 100,
    dataIndex: 'username'
  },
  {
    title: '登录结果',
    width: 100,
    dataIndex: 'response.message'
  },
  {
    title: 'IP',
    dataIndex: 'ip',
    width: 100
  },
  {
    title: '记录时间',
    dataIndex: 'createdAt',
    width: 180
  }
])

const loading = ref(false)
const tableData = ref([])

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 15 })

const listParams = reactive({
  page: 1
})

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await loginLog(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

getTableData()
</script>

<style lang="scss" scoped>
.table2 {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  padding: $padding;
  background: var(--color-bg-1);
  padding-bottom: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
